<template>
	<view class="container">
		<!-- start用户信息 -->
		<view class="userinfo">
			<view class="userinfo-avatar">
				<u-avatar class="avatar" :src="userInfo.avatar" size="120" :show-sex="showSex" :sex-icon="sexIcon" :sex-bg-color="sexColor"></u-avatar>
			</view>
			<view class="edit">
				<view class="userinfo-name">
					{{userInfo.nickName}}
				</view>
				<view class="edit-button">
					<u-button size="medium" v-if="isMyself" shape="circle" @click="edit">资料编辑</u-button>
				</view>
			</view>
			
			<view class="userinfo-remark">{{userInfo.remark || '这个人还没有介绍哦'}}</view>
			
			<u-line color="grey" :hair-line="true"/>
		</view>
		<!-- end用户信息 -->
		
		<view class="content">
			<u-tabs class="tabs"
				:list="list" 
				name="name" 
				:is-scroll="true" 
				:current="current" 
				@change="change"
				:bold="true"   
				font-size="30"
				bar-height="6" 
				bar-width="80" 
				active-color="#2979ff"
				inactive-color="#000000" 
			>
			</u-tabs>
			
			<goods-list v-if="current == 0" @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
			
			<u-empty v-if="current == 1" text="暂无数据" mode="list"></u-empty>
			
			<u-divider v-if="flag">到底啦</u-divider>
			
		</view>
	</view>
</template>

<script>
	import { constant } from '@/utils/constant.js'
	import {
		getGoodsList
	} from '@/api/goods.js'
	import {
		getUser,
		getUserById,
		edit,
		changeAvatar
	} from "@/api/user.js";
	export default {
		data() {
			return {
				userInfo: {},
				sexIcon:'',
				sexColor: '',
				showSex: true,
				isMyself: false,
				list: [{
					name: '宝贝'
				},{
					name: '帖子'
				}],
				current: 0,
				pageNum: 1,
				pageSize: 10,
				goods: [],        // 商品列表
				flag: false      // 触底标识
				
			}
		},
		methods: {
			edit(){
				this.$u.route('/pages/user-edit/user-edit', {
					userId: this.userInfo.userId
				})
			},
			change(index) {
				this.current = index;
				this.flag = false
				console.log(index)
			},
			async getGoodsList() {
				let params = {}
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				params.userId = this.userInfo.userId;
			
				await getGoodsList(params).then(res => {
					// 数据追加
					this.goods = [...this.goods, ...res.rows]
				})
			},
			// 导航到商品详情页
			goGoodsDetail(goodsId) {
				this.$u.route('/pages/goods-detail/goods-detail', {
					goodsId: goodsId
				});
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(decodeURIComponent(options.userInfo))
			if (this.userInfo.sex == 0) {
				this.sexIcon = 'man'
				this.sexColor = 'man-primary'
			} else {
				this.sexIcon = 'woman'
				this.sexColor = 'woman-error'
			}
			
			if(this.userInfo.userId == uni.getStorageSync(constant.userInfo).userId) {
				this.isMyself = true
			}
			
			this.getGoodsList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			getUserById(this.userInfo.userId).then(res => {
				this.userInfo = res.data
			})
			uni.stopPullDownRefresh();
		},
		// 下滑触底
		onReachBottom() {
			if (this.goods.length < this.pageNum * 10) {
				return this.flag = true
			}
			this.pageNum++
			this.getGoodsList()
		}
	}
</script>

<style lang="scss">
	@import "./user-detail.scss";
</style>
